  <extend name="Public/base"/>
  <block name="style">
    <!--此页面增加的style-->
    <link type="text/css" rel="stylesheet" href="__ADMIN_CSS__/nav.css"/>
  </block>

  <block name="body">
      <div class="row">
             <div class="col-sm-12">                                             
                  <select class="browser-default ud-lead-btn">
                    <option value="1">一级菜单</option>
                    <option value="2">二级菜单</option>
                    <option value="3">三级菜单</option>
                 </select>
                  <a class="ud-lead-btn ml-20" href='#'>添加菜单</a>
             </div>
         </div>
         <div class="ud-lead"> 
         <div class="ud-lead-title">           
             <div class="mb-15">菜单名称
                <span class="fr pr48">操作</span>
             </div>
             <div class="cf nestable-lists hide">
                  <div class="dd" id="nestable"></div>
                  <div class="dd" id="nestable2"></div>
             </div>
        <div class="dd" id="nestable3">
            <ol class="dd-list">
                <li class="dd-item dd3-item" data-id="15">
                    <div class="dd-handle dd3-handle">Drag</div>
                        <div class="dd3-content">首页
                           <span class="fr ud-lead-edit">
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-add"></i></span>
                                </a>
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-pencil"></i></span>
                                </a>
                                <a href="">
                                  <span><i class="iconfont icon-shanchu"></i></span>
                                </a>
                            </span>
                         </div>
                          <ol class="dd-list">
                              <li class="dd-item dd3-item" data-id="13">
                                <div class="dd-handle dd3-handle">Drag</div>
                                   <div class="dd3-content">科技咨询
                                     <span class="fr ud-lead-edit">
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-add"></i></span>
                                </a>
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-pencil"></i></span>
                                </a>
                                <a href="">
                                  <span><i class="iconfont icon-shanchu"></i></span>
                                </a>
                                   </span>
                                </div>
                                <ol class="dd-list">
                                    <li class="dd-item dd3-item" data-id="16">
                                      <div class="dd-handle dd3-handle">Drag</div>
                                        <div class="dd3-content">VR设备
                                         <span class="fr ud-lead-edit">
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-add"></i></span>
                                </a>
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-pencil"></i></span>
                                </a>
                                <a href="">
                                  <span><i class="iconfont icon-shanchu"></i></span>
                                </a>
                                     </span>
                                      </div>
                                    </li>
                                </ol>
                              </li>
                          </ol>
                </li>
                <li class="dd-item dd3-item" data-id="15">
                    <div class="dd-handle dd3-handle">Drag</div>
                        <div class="dd3-content">首页
                           <span class="fr ud-lead-edit">
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-add"></i></span>
                                </a>
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-pencil"></i></span>
                                </a>
                                <a href="">
                                  <span><i class="iconfont icon-shanchu"></i></span>
                                </a>
                            </span>
                         </div>
                          <ol class="dd-list">
                              <li class="dd-item dd3-item" data-id="13">
                                <div class="dd-handle dd3-handle">Drag</div>
                                <div class="dd3-content">科技咨询
                                   <span class="fr ud-lead-edit">
                                    <a href="" data-toggle="modal" data-target="#exampleModal">
                                      <span><i class="iconfont icon-add"></i></span>
                                    </a>
                                    <a href="" data-toggle="modal" data-target="#exampleModal">
                                      <span><i class="iconfont icon-pencil"></i></span>
                                    </a>
                                    <a href="">
                                      <span><i class="iconfont icon-shanchu"></i></span>
                                    </a>
                                  </span>
                                </div>
                                <ol class="dd-list">
                                    <li class="dd-item dd3-item" data-id="16">
                                      <div class="dd-handle dd3-handle">Drag</div>
                                      <div class="dd3-content">VR设备
                                         <span class="fr ud-lead-edit">
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-add"></i></span>
                                </a>
                                <a href="" data-toggle="modal" data-target="#exampleModal">
                                  <span><i class="iconfont icon-pencil"></i></span>
                                </a>
                                <a href="">
                                  <span><i class="iconfont icon-shanchu"></i></span>
                                </a>
                                       </span>
                                      </div>
                                    </li>
                                </ol>
                              </li>
                          </ol>
                  </li>                                
            </ol>
        </div>
    </div>
    <div class="tc ud-martop-10">
       <button type="submit" class="radius ud-button bg-color-blue submit ajax-post ud-shadow">保存</button>
    </div>
<!-- 弹窗 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog mt-90 mb-90" role="document">
    <div class="modal-content">
      <div class="modal-body bg-color-fff">
         <div class="row mb-20 tc">
            <h5 class="col s12 color-26 f18">添加子菜单</h5>
         </div>
          <!-- <div class="row">
            <form class="col-sm-12"> -->
              <div class="row">
                    <div class="input-group col-sm-12">                       
                          <div class="form-group is-empty">
                            <input type="text" class="form-control col-md-8" placeholder="Search">
                          <span class="material-input"></span></div>                        
                    </div>
                    <div class="input-group col-sm-12">                     
                          <div class="form-group is-empty">
                            <input type="text" class="form-control col-md-8" placeholder="Search">
                          <span class="material-input"></span></div>                     
                    </div>
                    <div class="input-group col-sm-12">                      
                          <div class="form-group is-empty">
                            <input type="text" class="form-control col-md-8" placeholder="Search">
                          <span class="material-input"></span></div>                      
                    </div>
                </div>
              <div class="row modal-select">
                 <div class=" col-sm-4 pl0 pr0">
                    <select class="browser-default btn bxshadow">
                        <option value="1">菜单分类</option>
                        <option value="2">父级菜单</option>
                        <option value="3">页面</option>
                     </select>
                  </div>
              </div>
              <div class="row modal-select">
                 <div class=" col-sm-4 pl0 pr0">
                    <select class="browser-default btn bxshadow">
                        <option value="1">菜单分类</option>
                        <option value="2">父级菜单</option>
                        <option value="3">页面</option>
                     </select>
                  </div>
              </div>
              <div class="row modal-select">
                 <div class=" col-sm-4 pl0 pr0">
                    <select class="browser-default btn bxshadow">
                        <option value="1">菜单分类</option>
                        <option value="2">父级菜单</option>
                        <option value="3">页面</option>
                     </select>
                  </div>
              </div>
           <!--  </form>
                   </div> -->
       <div class="tc pt10 pb20">
            <button type="submit" class="radius ud-button bg-color-orange2 ud-shadow">添加</button>
       </div>
      </div>
    </div>
  </div>
</div> 
</div>

  </block>

  <block name="script">
<!--此页面增加的script-->
<script>
/*导航管理*/
$(document).ready(function(){
    var updateOutput = function(e){
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };
    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // activate Nestable for list 2
    $('#nestable2').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    updateOutput($('#nestable2').data('output', $('#nestable2-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });
    $('#nestable3').nestable();
});

/*弹窗*/
    $('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
</script>
  </block>